<script>
	import { Notyf } from 'notyf';
	import { onMount } from 'svelte';
	import { writable } from 'svelte/store';

	let shopName = '';
	let productCategories = '';
	let idNumber = '';
	let shopDescription = '';
	let registrationAddress = '';
	let registrationCapital = 0.0;
	let registrationDate = '';
	let shopOwner = '';
	let shopApprovalStatus = 'audit';
	let shopImage = null;
	let notyf;

	const currentPage = writable('home');
	let userData = {};

	let shopdata = [];

	onMount(() => {
		// 从localStorage中获取存储的userData字符串
		const storedUserData = localStorage.getItem('userData');

		// 检查是否有存储的数据
		if (storedUserData) {
			// 将JSON字符串解析为对象
			userData = JSON.parse(storedUserData);
			// console.log(userData.userType); // 输出 'business'
			// console.log(userData.username); // 输出 'man'
			// console.log(userData.phonenumber); // 输出 '888'
			// 其他属性依次类推...
		} else {
			console.error('No user data found in localStorage.');
		}
		notyf = new Notyf({
			duration: 3000,
			className: 'x-notification',
			position: { x: 'right', y: 'top' }
		});
		shopOwner = userData.username;
		// 检查是否已经刷新过
		if (!sessionStorage.getItem('refreshed')) {
			sessionStorage.setItem('refreshed', 'true');
			window.location.reload();
		} else {
			sessionStorage.removeItem('refreshed');
		}
		refreshBackgroundImage();
	});

	function refreshBackgroundImage() {
		const body = document.querySelector('body');
		const timestamp = new Date().getTime();
		body.style.backgroundImage = `url('/beach.png?timestamp=${timestamp}')`;
	}

	function handleImageUpload(event) {
		const file = event.target.files[0];
		if (file) {
			shopImage = file;
		}
	}

	function handleSubmit() {
		if (shopName.length > 12) {
			notyf.error('店名长度不能超过12个字符');
			return;
		}
		if (shopDescription.length > 128) {
			notyf.error('商店简介长度不能超过128个字符');
			return;
		}
		if (registrationAddress.length > 32) {
			notyf.error('备案地址长度不能超过32个字符');
			return;
		}
		if (registrationCapital <= 1000) {
			notyf.error('注册资本必须大于1000');
			return;
		}

		const formData = new FormData();
		formData.append('shopName', shopName);
		formData.append('productCategories', productCategories);
		formData.append('idNumber', idNumber);
		formData.append('shopDescription', shopDescription);
		formData.append('registrationAddress', registrationAddress);
		formData.append('registrationCapital', registrationCapital);
		formData.append('registrationDate', registrationDate);
		formData.append('shopOwner', shopOwner);
		formData.append('shopApprovalStatus', shopApprovalStatus);
		formData.append('shopImage', shopImage);

		fetch('/api/bussiness/registerShop', {
			method: 'POST',
			body: formData
			// 	JSON.stringify({
			//     shopName: shopName,
			//     productCategories: productCategories,
			//     idNumber: idNumber,
			//     shopDescription: shopDescription,
			//     registrationAddress: registrationAddress,
			//     registrationCapital: registrationCapital,
			//     registrationDate: registrationDate,
			//     shopOwner: shopOwner,
			//     shopApprovalStatus: shopApprovalStatus,
			//     file: shopImage
			// })
		})
			.then((response) => {
				if (!response.ok) {
					throw new Error('注册失败');
				}
				return response.json();
			})
			.then((data) => {
				notyf.success('注册成功');

				setTimeout(() => {
					switchPage('home');
				}, 1000);
				shopName = '';
				productCategories = '';
				idNumber = '';
				shopDescription = '';
				registrationAddress = '';
				registrationCapital = 0.0;
				registrationDate = '';
				shopOwner = userData.username;
				shopImage = null;
			})
			.catch((error) => {
				notyf.error(error.message || '注册请求出错');
				console.error('注册请求出错:', error);
			});
	}

	function switchPage(page) {
		currentPage.set(page);
		if (page === 'manage') {
			getMyShop()
				.then(() => {
					newshopname = shopdata[0].shopname;
					return new Promise((resolve) => setTimeout(resolve, 300));
				})
				.then(() => {
					return getShopGoods();
				})
				.then(() => {
					return new Promise((resolve) => setTimeout(resolve, 700)); // 保证总延时 1000ms
				})
				.then(() => {
					return fetchPurchase();
				})
				.then(() => {
					return new Promise((resolve) => setTimeout(resolve, 500)); // 保证总延时 1000ms
				})
				.then(() => {
					return fetchComments();
				})
				.catch((error) => {
					console.error('An error occurred:', error);
				});
		}
	}

	let newUsername = '';
	let newPassword = '';
	let newPhoneNumber = '';
	let newEmail = '';
	let isEditing = false;

	function startEditing() {
		newUsername = '';
		newPassword = '';
		newPhoneNumber = '';
		newEmail = '';
		isEditing = true;
	}

	// 修改个人信息
	async function submitChanges() {
		if (newPhoneNumber == '' || newPassword == '' || newEmail == '') {
			notyf.error('修改内容不能为空');
			return;
		}

		const response = await fetch('/api/bussiness/updateinfo', {
			method: 'PUT',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify({
				oldusername: shopOwner,
				username: shopOwner,
				password: newPassword,
				phonenumber: newPhoneNumber,
				email: newEmail
			})
		});
		if (response.ok) {
			const data = await response.json();
			userData.userType = data.userType;
			userData.username = data.username;
			userData.password = data.password;
			userData.phonenumber = data.phonenumber;
			userData.email = data.email;
			userData.idnumber = data.idnumber;
			shopOwner = data.username;
			// 同步本地储存
			localStorage.setItem('userData', JSON.stringify(userData));

			notyf.success('信息修改成功');
			isEditing = false;
		} else {
			notyf.error('信息修改失败');
		}
	}

	function cancelEdit() {
		isEditing = false;
	}

	//以下是manage界面的逻辑
	async function getMyShop() {
		try {
			const response = await fetch('/api/bussiness/shopmgr', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					shopname: userData.username
				})
			});
			if (!response.ok) {
				console.log('error');
			}
			const data = await response.json();
			shopdata = Array.isArray(data) ? data : [data];
			// console.log(userData1[0]);
			if (shopdata[0] == null) {
				shopdata = [];
			}
		} catch (error) {
			notyf.error('获取商店信息失败');
			console.error('获取商店信息失败:', error);
		}
	}

	async function deleteshop() {
		if (goodsdata.length > 0){
			alert('商店下有商品，请先删除商品');
			return;
		}
		try {
			const response = await fetch('/api/bussiness/shopmgr', {
				method: 'DELETE',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					shopname: userData.username
				})
			});
			if (!response.ok) {
				console.log('error');
			}
			getMyShop();
			notyf.success('删除商店成功');
		} catch (error) {
			notyf.error('删除商店失败');
			console.error('删除商店失败:', error);
		}
	}

	let goodsdata = [];
	// 定义局部状态变量
	let showAddForm = false;
	let showEditForm = false;
	let currentGoods = null;
	let newshopname;
	let newgoodname = '';
	let newgoodprice = '0.0';
	let newgoodcount = '0';

	async function getShopGoods() {
		try {
			//console.log(shopdata[0].shopname);
			const response = await fetch('/api/bussiness/goodinfoget', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},
				body: JSON.stringify({
					shopname: shopdata[0].shopname
				})
			});
			if (!response.ok) {
				console.log('error');
			}
			const data = await response.json();
			goodsdata = Array.isArray(data) ? data : [data];
			// console.log(goodsdata[0]);
			if (goodsdata[0] == null) {
				goodsdata = [];
				// console.log(goodsdata);
			}
		} catch (error) {
			notyf.error('获取商店信息失败');
			console.error('获取商店信息失败:', error);
		}
	}

	async function deletegoods(goods) {
		// 构建请求体
		const fetchdata = {
			shopname: goods.shopname,
			goodname: goods.goodname,
			goodprice: goods.goodprice,
			goodcount: goods.goodcount
		};
		//console.log(fetchdata);
		// 发送请求
		const response = await fetch('/api/bussiness/goodmgr', {
			method: 'DELETE',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(fetchdata)
		});
		if (!response.ok) {
			notyf.error('删除商品失败');
			console.log('error');
		}
		getShopGoods();
		notyf.success('删除商品成功');
	}

	async function addgoods() {
		if(shopdata[0] == null){
			alert('请先创建商店');
			return;
		}
		currentGoods = null;
		showAddForm = true;
		showEditForm = false;
	}

	async function editgoods(goods) {
		currentGoods = goods;
		showEditForm = true;
		showAddForm = false;
	}

	// 取消表单的逻辑
	function cancelForm() {
		showAddForm = false;
		showEditForm = false;
		currentGoods = null;
		newshopname = shopdata[0].shopname;
		newgoodname = '';
		newgoodprice = 0.0;
		newgoodcount = 0;
	}

	// 提交表单的逻辑
	async function addgoodssub() {
		newshopname = shopdata[0].shopname;
		// 获取表单数据
		const fetchdata = {
			shopname: newshopname,
			goodname: newgoodname,
			goodprice: newgoodprice,
			goodcount: newgoodcount
		};
		// console.log(fetchdata);

		// 发送请求
		const response = await fetch('/api/bussiness/goodmgr', {
			method: 'POST',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(fetchdata)
		});
		if (!response.ok) {
			notyf.error('添加商品失败');
			console.log('error');
		}

		getShopGoods();
		notyf.success('添加商品成功');
		cancelForm();
	}

	async function editgoodssub() {
		const fetchdata = {
			shopname: currentGoods.shopname,
			goodname: currentGoods.goodname,
			goodprice: currentGoods.goodprice,
			goodcount: currentGoods.goodcount
		};
		//console.log(fetchdata);

		// 发送请求
		const response = await fetch('/api/bussiness/goodmgr', {
			method: 'PUT',
			headers: {
				'Content-Type': 'application/json'
			},
			body: JSON.stringify(fetchdata)
		});
		if (!response.ok) {
			notyf.error('修改商品失败');
			console.log('error');
		}
		getShopGoods();
		notyf.success('修改商品成功');
		cancelForm(); // 提交后关闭表单
	}

	let buyData = [];
	// 所有流水
	async function fetchPurchase() {
		try {
			const response = await fetch('/api/bussiness/purchaseinfoget', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},

				body: JSON.stringify({
					shopname: shopdata[0].shopname
				})
			});
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			const data = await response.json();
			buyData = Array.isArray(data) ? data : [data];
			// console.log(buyData[0]);
			if (buyData[0] == null) {
				buyData = [];
			}
		} catch (error) {
			console.error('Fetch error:', error);
		}
	}

	let commentData = [];
	//评论
	async function fetchComments() {
		try {
			// console.log(shopdata[0].shopname);
			// console.log(shopdata[0].shopname);
			// console.log(shopdata[0].shopname);
			const response = await fetch('/api/bussiness/commentget', {
				method: 'POST',
				headers: {
					'Content-Type': 'application/json'
				},

				body: JSON.stringify({
					shopname: shopdata[0].shopname
				})
			});
			if (!response.ok) {
				throw new Error(`HTTP error! status: ${response.status}`);
			}
			const data = await response.json();
			commentData = Array.isArray(data) ? data : [data];
			//console.log(commentData[0]);
			if (commentData[0] == null) {
				commentData = [];
			}
		} catch (error) {
			console.error('Fetch error:', error);
		}
	}
</script>

<div id="sidebar">
	<button on:click={() => switchPage('home')}>主页</button>
	<button on:click={() => switchPage('register')}>注册商店</button>
	<button on:click={() => switchPage('manage')}>管理已经开张的商店</button>
</div>

<div id="content">
	{#if $currentPage === 'home'}
		<div id="home-container">
			<h1>个人主页</h1>
			<div class="flex-container">
				<table class="user-info">
					<tr>
						<td>用户类型：</td>
						<td>{userData.userType}</td>
					</tr>
					<tr>
						<td>用户名：</td>
						<td>{userData.username}</td>
					</tr>
					<tr>
						<td>邮箱：</td>
						<td>{userData.email}</td>
					</tr>
					<tr>
						<td>手机号：</td>
						<td>{userData.phonenumber}</td>
					</tr>
					<tr>
						<td>身份证号：</td>
						<td>{userData.idnumber}</td>
					</tr>
					<tr>
						<td>密码：</td>
						<td>{userData.password}</td>
					</tr>
				</table>
				<div class="buttons">
					<button class="edit-button" on:click={startEditing}>修改个人信息</button>
				</div>
			</div>
			{#if isEditing}
				<div id="edit-form-container" class="right-form">
					<h2>修改个人信息</h2>
					<div class="input_box">
						<label for="newPassword">新密码</label>
						<input id="newPassword" type="password" bind:value={newPassword} />
					</div>
					<div class="input_box">
						<label for="newPhoneNumber">新手机号</label>
						<input id="newPhoneNumber" type="text" bind:value={newPhoneNumber} />
					</div>
					<div class="input_box">
						<label for="newEmail">新邮箱地址</label>
						<input id="newEmail" type="email" bind:value={newEmail} />
					</div>
					<div class="buttons">
						<button class="submit" on:click={submitChanges}>提交修改</button>
						<button class="cancel" on:click={cancelEdit}>取消</button>
					</div>
				</div>
			{/if}
		</div>
	{/if}

	{#if $currentPage === 'register'}
		<div id="form-container">
			<h2>商户开店注册</h2>
			<div class="input_box">
				<label for="shopName">店名</label>
				<input
					id="shopName"
					type="text"
					bind:value={shopName}
					maxlength="12"
					placeholder="请输入店名 (12个字符以内)"
				/>
			</div>
			<div class="input_box">
				<label for="productCategories">商品类别</label>
				<input
					id="productCategories"
					type="text"
					bind:value={productCategories}
					placeholder="请输入商品类别"
				/>
			</div>
			<div class="input_box">
				<label for="idNumber">身份证号</label>
				<input id="idNumber" type="text" bind:value={idNumber} placeholder="请输入身份证号" />
			</div>
			<div class="input_box">
				<label for="shopDescription">商店简介</label>
				<textarea
					id="shopDescription"
					bind:value={shopDescription}
					maxlength="128"
					placeholder="请输入商店简介 (128个字符以内)"
				></textarea>
			</div>
			<div class="input_box">
				<label for="registrationAddress">备案地址</label>
				<input
					id="registrationAddress"
					type="text"
					bind:value={registrationAddress}
					maxlength="32"
					placeholder="请输入备案地址 (32个字符以内)"
				/>
			</div>
			<div class="input_box">
				<label for="registrationCapital">注册资本</label>
				<input
					id="registrationCapital"
					type="number"
					bind:value={registrationCapital}
					min="1000"
					step="0.01"
					placeholder="请输入注册资本 (大于1000的浮点数)"
				/>
			</div>
			<div class="input_box">
				<label for="registrationDate">注册时间</label>
				<input
					id="registrationDate"
					type="date"
					bind:value={registrationDate}
					placeholder="请输入注册时间 (YYYY-MM-DD)"
				/>
			</div>
			<div class="input_box">
				<label for="shopOwner">店铺拥有者</label>
				<input
					id="shopOwner"
					type="text"
					bind:value={shopOwner}
					readonly
					placeholder="店铺拥有者 (登录的账号名)"
				/>
			</div>
			<div class="input_box">
				<label for="shopImage">店铺图片</label>
				<input id="shopImage" type="file" accept="image/*" on:change={handleImageUpload} />
			</div>
			<button class="submit" on:click={handleSubmit}>提交注册</button>
		</div>
	{/if}

	{#if $currentPage === 'manage'}
		<div id="shop-management-container">
			<h2>商店管理</h2>
			<div>
				<h3>我的商店</h3>
				<table class="shop-info">
					<thead>
						<tr>
							<th>Shopname</th>
							<th>Category</th>
							<th>Idnumber</th>
							<th>Introduce</th>
							<th>Address</th>
							<th>Money</th>
							<th>Createtime</th>
							<th>State</th>
							<th>Owner</th>
							<th>Image</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{#each shopdata as shop}
							<tr>
								<td>{shop.shopname}</td>
								<td>{shop.category}</td>
								<td>{shop.idnumber}</td>
								<td>{shop.introduce}</td>
								<td>{shop.address}</td>
								<td>{shop.money}</td>
								<td>{shop.createtime}</td>
								<td>{shop.state}</td>
								<td>{shop.owner}</td>
								<td
									><img
										src={'/shopimage/' + shop.imagename}
										alt=""
										style="width: 100px; height: 100px;"
									/></td
								>
								<td>
									<div class="button-group">
										<button class="delete" on:click={() => deleteshop(shop)}>删除商店</button>
									</div>
								</td>
							</tr>
						{/each}
						{#if shopdata.length === 0}
							<tr>
								<td colspan="11">No elem found</td>
							</tr>
						{/if}
					</tbody>
				</table>
			</div>
		</div>
		<div id="shop-management-container">
			<div>
				<h3>管理商品</h3>
				<table class="shop-info">
					<thead>
						<tr>
							<th>Shopname</th>
							<th>Goodname</th>
							<th>Goodprice</th>
							<th>Goodcount</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						{#each goodsdata as goods}
							<tr>
								<td>{goods.shopname}</td>
								<td>{goods.goodname}</td>
								<td>{goods.goodprice}</td>
								<td>{goods.goodcount}</td>
								<td>
									<div class="button-group">
										<button class="edit" on:click={() => editgoods(goods)}>编辑货物</button>
										<button class="delete" on:click={() => deletegoods(goods)}>下架货物</button>
									</div>
								</td>
							</tr>
						{/each}
						{#if goodsdata.length === 0}
							<tr>
								<td colspan="5">No elem found</td>
							</tr>
						{/if}
					</tbody>
				</table>
				<div class="button-group">
					<button class="add" on:click={addgoods}>添加商品</button>
				</div>
			</div>

			{#if showAddForm}
				<div class="shop-form-container">
					<h3>添加商品</h3>
					<form>
						<label>Shopname: <input type="text" bind:value={newshopname} readonly /></label>
						<label>Goodname: <input type="text" bind:value={newgoodname} required /></label>
						<label
							>Goodprice: <input type="number" bind:value={newgoodprice} min="0" required /></label
						>
						<label
							>Goodcount: <input type="number" bind:value={newgoodcount} min="0" required /></label
						>
						<div class="button-group">
							<button type="button" class="goodsubmit" on:click={addgoodssub}>提交</button>
							<button type="button" class="goodcancel" on:click={cancelForm}>取消</button>
						</div>
					</form>
				</div>
			{/if}

			{#if showEditForm}
				<div class="form-right">
					<h3>编辑货物</h3>
					<form>
						<label
							>Shopname: <input type="text" bind:value={currentGoods.shopname} readonly /></label
						>
						<label
							>Goodname: <input type="text" bind:value={currentGoods.goodname} readonly /></label
						>
						<label
							>Goodprice: <input
								type="number"
								bind:value={currentGoods.goodprice}
								min="0"
								required
							/></label
						>
						<label
							>Goodcount: <input
								type="number"
								bind:value={currentGoods.goodcount}
								min="0"
								required
							/></label
						>
						<div class="button-group">
							<button class="goodsubmit" on:click={editgoodssub}>提交</button>
							<button class="goodcancel" on:click={cancelForm}>取消</button>
						</div>
					</form>
				</div>
			{/if}
		</div>
		<div id="shop-management-container">
			<div>
				<h3>商店流水</h3>
				<table class="shop-info">
					<thead>
						<tr>
							<th>Consumer</th>
							<th>Goodname</th>
							<th>Buycount</th>
							<th>Goodprice</th>
							<th>Cost</th>
						</tr>
					</thead>
					<tbody>
						{#each buyData as buy}
							<tr>
								<td>{buy.username}</td>
								<td>{buy.goodname}</td>
								<td>{buy.goodcount}</td>
								<td>{buy.goodprice}</td>
								<td>{buy.cost}</td>
							</tr>
						{/each}
						{#if buyData.length === 0}
							<tr>
								<td colspan="5">No elem found</td>
							</tr>
						{/if}
					</tbody>
				</table>
			</div>
		</div>
		<div id="shop-management-container">
			<div>
				<h3>用户评价</h3>
				<table class="shop-info">
					<thead>
						<tr>
							<th>Time</th>
							<th>Consumer</th>
							<th>Shopname</th>
							<th>Goodname</th>
							<th>Comment</th>
						</tr>
					</thead>
					<tbody>
						{#each commentData as comment}
							<tr>
								<td>{comment.time}</td>
								<td>{comment.username}</td>
								<td>{comment.shopname}</td>
								<td>{comment.goodname}</td>
								<td>{comment.text}</td>
							</tr>
						{/each}
						{#if commentData.length === 0}
							<tr>
								<td colspan="5">No elem found</td>
							</tr>
						{/if}
					</tbody>
				</table>
			</div>
		</div>
	{/if}
</div>

<style>
	@import 'notyf/notyf.min.css';

	:global(body) {
		margin: 0;
		font-family: Arial, sans-serif;
		display: flex;
		height: 100vh;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	#sidebar {
		width: 50px;
		background-color: rgba(0, 0, 0, 0.7);
		color: white;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-top: 20px;
		position: absolute;
		left: 0;
		top: 0;
		bottom: 0;
		transition: width 0.3s;
	}

	#sidebar:hover {
		width: 250px;
	}

	#sidebar button {
		width: 100%;
		padding: 10px;
		margin: 10px 0;
		border: none;
		background-color: #007bff;
		color: white;
		font-size: 16px;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	#sidebar button:hover {
		background-color: #0056b3;
	}

	#content {
		flex-grow: 1;
		padding: 20px;
		margin-left: 35px;
		overflow-y: auto;
	}

	#sidebar:hover ~ #content {
		margin-left: 250px;
		width: calc(100% - 250px);
	}

	#form-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		height: 90%;
		/* max-width: 800px; */
		margin: 20px auto;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow-y: auto;
		max-height: calc(100vh - 40px);
	}

	#home-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 80%;
		height: 80%;
		/* max-width: 800px; */
		margin: 20px auto;
		background-color: rgb(255, 255, 255, 0.1);
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow-y: auto;
		max-height: calc(100vh - 40px);
	}

	h2 {
		text-align: center;
		color: #333;
		margin-bottom: 20px;
	}

	.input_box {
		width: 100%;
		margin-bottom: 10px;
	}

	input,
	textarea {
		width: 100%;
		padding: 8px;
		margin-top: 5px;
		border: 1px solid #ccc;
		border-radius: 5px;
		font-size: 14px;
	}

	textarea {
		resize: none;
	}

	button.submit,
	button.cancel {
		width: 100%;
		padding: 12px;
		border: none;
		border-radius: 5px;
		color: white;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	button.submit {
		background-color: #007bff;
	}

	button.submit:hover {
		background-color: #0056b3;
	}

	button.cancel {
		background-color: #ff0000;
	}

	button.cancel:hover {
		background-color: #e71368;
	}

	.user-info {
		display: table;
		flex-direction: column;
		align-items: center;
		max-width: 1200px;
		width: 100%;
		margin: 0 auto;
		padding: 20px;
		border-radius: 8px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		background-color: #ffffff;
		margin-top: 40px;
	}
	.user-info td {
		padding: 10px; /* 调整单元格内边距 */
		border: 1px solid #ccc;
	}

	.user-info tr:nth-child(even) {
		background-color: rgba(255, 255, 255, 0.5);
	}

	.user-info tr:nth-child(odd) {
		background-color: rgba(255, 255, 255, 0.3);
	}

	.user-info td:first-child {
		font-weight: bold;
	}

	#home-container {
		text-align: center; /* 标题水平居中 */
	}

	.edit-button {
		width: 200px;
		padding: 10px;
		background-color: #007bff;
		border: none;
		border-radius: 20px;
		color: white;
		font-size: 16px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.edit-button:hover {
		background-color: #0056b3;
	}

	.right-form {
		position: absolute;
		right: 50px;
		top: 50%;
		transform: translateY(-50%);
		width: calc(100% - 400px);
		max-width: 600px;
		background-color: rgba(255, 255, 255, 0.8);
		padding: 20px;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		overflow-y: auto;
		max-height: calc(100vh - 40px);
	}

	/* Media Queries for responsive design */
	@media (max-width: 768px) {
		#sidebar {
			width: 40px;
		}

		#sidebar:hover {
			width: 200px;
		}

		#content {
			margin-left: 60px;
			width: calc(100% - 60px);
		}

		#sidebar:hover ~ #content {
			margin-left: 200px;
			width: calc(100% - 200px);
		}

		.right-form {
			width: calc(100% - 80px);
			right: 10px;
		}
	}

	@media (max-width: 480px) {
		#sidebar {
			width: 30px;
		}

		#sidebar:hover {
			width: 150px;
		}

		#content {
			margin-left: 50px;
			width: calc(100% - 50px);
		}

		#sidebar:hover ~ #content {
			margin-left: 150px;
			width: calc(100% - 150px);
		}

		.right-form {
			width: calc(100% - 40px);
			right: 5px;
		}
	}

	table.shop-info {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
	}

	table.shop-info th,
	table.shop-info td {
		background-color: rgba(255, 255, 255, 0.5);
		border: 1px solid #dddddd;
		padding: 8px;
		text-align: center;
	}

	table.shop-info th {
		background-color: #1be944;
	}

	.button-group {
		display: flex;
		justify-content: center;
	}

	.button-group button {
		margin: 0 5px;
		padding: 5px 10px;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		transition: background-color 0.3s;
	}

	.button-group button.delete {
		background-color: #f44336;
		color: white;
	}

	.button-group button.delete:hover {
		background-color: #da190b;
	}
	.button-group button.add {
		background-color: #185ecf;
		color: white;
	}

	.button-group button.add:hover {
		background-color: #0b27c4;
	}
	.button-group button.edit {
		background-color: #007bff;
		color: white;
	}

	.button-group button.edit:hover {
		background-color: #0056b3;
	}

	.button-group button.goodsubmit {
		background-color: #28a745;
		color: white;
	}

	.button-group button.goodsubmit:hover {
		background-color: #1e7e23;
	}

	.button-group button.goodcancel {
		background-color: #f63030;
		color: white;
	}

	.button-group button.goodcancel:hover {
		background-color: #c50303;
	}

	.shop-form-container {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
		background-color: rgba(255, 255, 255, 0.6);
	}
	.form-right {
		margin-top: 150px;
		border: 1px solid #ccc;
		padding: 10px;
		background-color: #f9f9f9;
		position: fixed;
		right: 0;
		top: 0;
		width: 300px;
		background-color: #fff;
		border: 1px solid #ccc;
		padding: 10px;
	}
</style>
